<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css"/>
</head>
<style>
    li {
        list-style: none;
    }
    .top {
        top: 0px;
        width: 100%;
        height: 20px;
        background-color: rgb(223, 216, 211);
    }
    .container {
        width: 1200px;
        margin: auto;
        position: relative;
    }
    .menuLeft {
       width: 500px;
    }
    .menuright {
        float: right;
    }
    .menuLeft li {
        float: left;
        margin-left: 10px;
        list-style: none;
        
    }
    #login , .xiaxian{
        padding-right: 10px;
        border-right: 1px solid #444b5c;
    }
    #wellcome {
        margin-right: 20px;
    }
    .menuright li {
        float: left;
        margin-left: 10px;
        list-style: none;   
    }
    li {
        font-size: 10px;
    }
    a:hover {
        color: rgb(153, 51, 68);
        text-decoration: none;
    }
    a {
        text-decoration: none;
        color: #666;
    }

    .head {
        top: 0px;
        width: 100%;
        height: 120px;
        background-color: rgb(133, 189, 210);
    }

    #logo {

        height: auto;
    }
    #searcharea {
        float: right;
        width: 500px;
        position: relative;
        top: -78px;
    }
    #searchkey  {
        vertical-align: top; 
        width: 413px;
        height: 36px;
        border: 1px solid #DD302D;
    }
    #searchbutton  {
        right: 0px;
        width: 80px;
        height: 36px;
        background-color: #DD302D;
        background-image: url('./img/serch_icon.png');
        background-repeat: no-repeat;
        background-position: 28px 6px;
    }
   
   #menulist li {
        float: left;
        list-style: none;
        margin-right: 20px;
        font-size: 16px;
   }
   #mainfirst {
        width: 190px;  
        height: 50px;
        background-color: red;
   }
   #menulist {
        float: right;
        position: relative;
        bottom: 31px;
        right: 208px;
 
   }
   .main {       
        margin-top: 20px;   
        border-bottom: 1px solid #cc2b28;   
   }
   #shangpingfenlei {
        width: 130px;
        padding: 10px 30px 10px 50px;
        background-color: rgb(210, 48, 40);
        margin-right: 30px;
        color: white;
   }
   #nav-left {
        display: inline-block;
        width: 210px;
        height: 230px;
        background-color: rgb(239, 245, 233);
   }
   #nav-center {
        /* display: inline-block; */
        width: 692px;
        height: 458px;
        background-color: #444b5c;
        position: absolute;
        top: 0px;
        left: 225px;
        z-index: 0;
   }
   #nav-left>ul {
        position: relative;
   }

   #nav-left>ul>li {
        padding-top: 5px;
        font-size: 15px;
        list-style: none;
        padding-left: 10px;
        /* position: relative; */
    
   }
   #nav-left>ul>li:hover {
        background-color: rebeccapurple;
   }

   #second-info {
        width: 715px;
        height: 459px;
        background-color: rgb(239, 245, 233);
        position: absolute;
        left: 210px;
        top: 0px;
        display: none;
   }

   #nav-left>ul>li:hover #second-info {
        display: block;
        z-index: 1;
   }

   .clearfix {
        display: block;
        background-color: rebeccapurple;
        /* width: 500px;
        height: 100px; */
        margin-left: 40px;
        clear: both;
   }
   .clearfix dt {
        float: left;
        margin-left: 10px;
        margin-top: 10px;
        font-weight: 800;
   }

   .clearfix dd{
        float: left;
        margin-left: 10px;
        border-left: #666 solid 1px;
        padding-left: 10px;
        margin-top: 10px;
        top: 0px;
   }
   #nav-right{
        /* display: inline-block; */
        position: absolute;
        top: 0;
        right: 0px;
        width: 270px;
        height: 460px;
   
   }
   #gengduo {
        width: 270px;
        height: 160px;
        border:1px solid #D9D9D9;
        margin-top: 3px;
   }
   #tobiao {
        width: 270px;
        height: 300px;
        /* border:1px solid #D9D9D9; */
   }
   #kuaib {
        margin: 10px;
        border-bottom: #D9D9D9 solid 1px;
        padding: 5px;
        font-size: 10px;
        color: gray;
   }
   #libiao li{
      margin: 8px;
   }
   #iccc {
        /* display: block; */
        margin: 7px;
   }
   #tobiao span {
        position: relative;
        left: 13px;
        top: -4px;
        font-size: 8px;
        
   }
   .imaster {
        width: 63px;
        display: inline-block;
        cursor: pointer;
   }
   .miaos img {
        margin: 3px;
        cursor: pointer;
   }
</style>
<body>
    <div class="top">
        <div class="container">
            <div class="menuLeft">
                <ul>
                    <li id="wellcome">商品会欢迎您</li>
                    <li id="login">请<a href="#">登录</a></li>
                    <li >免费<a href="#">注册</a></li>
                </ul>
            </div>
            <div class="menuright">
                <ul>
                    <li class="xiaxian"><a href="#">我的订单</a></li>
                    <li class="xiaxian"><a href="#">我的购物车</a></li>
                    <li class="xiaxian"><a href="#">我的商品会</a></li>
                    <li class="xiaxian"><a href="#">商品会会员</a></li>
                    <li class="xiaxian"><a href="#">企业采购</a></li>
                    <li class="xiaxian"><a href="#">关注商品会</a></li>
                    <li class="xiaxian"><a href="#">合作招商</a></li>
                    <li class=""><a href="#">商家后台</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="head">
        <div class="container">
            <div id="logo">
                <img src="./img/logo.png" alt="">
            </div>
            <div id="searcharea">
               <input id="searchkey" type="text" name="searchkey"/>
               <input id="searchbutton" type="button">
            </div>
        </div>
    </div>
    <div class="main" >
        <div class="container">
            <div id="mainmenu">
                <div id="shangpingfenlei">
                    全部商品分类
                </div>
                <div id="menulist">
                    <ul>
                        <li><a href="#">商品超时</a></li>
                        <li><a href="#">优惠券</a></li>
                        <li><a href="#">买啥</a></li>
                        <li><a href="#">商品电器</a></li>
                        <li><a href="#">商品生鲜</a></li>
                        <li><a href="#">plus会员</a></li>
                        <li><a href="#">进口好物</a></li>
                        <li><a href="#">品牌闪购</a></li>
                        <li><a href="#">拍卖</a></li>
                        <li><a href="#">五金店</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="all-nav">
        <div class="container" style="height: 460px;">
            <div id="nav-left">
                <ul>
                    <li><a href="#">手机/运营商/数码</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">电子书刊</a></dt>
                                <dd><a href="#">电子书</a></dd>
                                <dd><a href="#">网络原创</a></dd>
                                <dd><a href="#">数字杂志</a></dd>
                                <dd><a href="#">多媒体图书</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">音像</a></dt>
                                <dd><a href="#">音乐</a></dd>
                                <dd><a href="#">影视</a></dd>
                                <dd><a href="#">教育音像</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">英文原版</a></dt>
                                <dd><a href="#">少儿</a></dd>
                                <dd><a href="#">商务投资</a></dd>
                                <dd><a href="#">英语学习考试</a></dd>
                                <dd><a href="#">文学</a></dd>
                                <dd><a href="#">传记</a></dd>
                                <dd><a href="#">励志</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">文艺</a></dt>
                                <dd><a href="#">小说</a></dd>
                                <dd><a href="#">文学</a></dd>
                                <dd><a href="#">青春文学</a></dd>
                                <dd><a href="#">传记</a></dd>
                                <dd><a href="#">艺术</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">少儿</a></dt>
                                <dd><a href="#">胎教</a></dd>
                                <dd><a href="#">0-2岁</a></dd>
                                <dd><a href="#">3-6岁</a></dd>
                                <dd><a href="#">7-10岁</a></dd>
                                <dd><a href="#">11-14岁</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">人文社科</a></dt>
                                <dd><a href="#">历史</a></dd>
                                <dd><a href="#">哲学</a></dd>
                                <dd><a href="#">国学</a></dd>
                                <dd><a href="#">政治/军事</a></dd>
                                <dd><a href="#">法律</a></dd>
                                <dd><a href="#">人文社科</a></dd>
                                <dd><a href="#">心理学</a></dd>
                                <dd><a href="#">文化</a></dd>
                                <dd><a href="#">社会科学</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">经管励志</a></dt>
                                <dd><a href="#">经济</a></dd>
                                <dd><a href="#">金融与投资</a></dd>
                                <dd><a href="#">管理</a></dd>
                                <dd><a href="#">励志与成功</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">生活</a></dt>
                                <dd><a href="#">健康与保健</a></dd>
                                <dd><a href="#">家庭与育儿</a></dd>
                                <dd><a href="#">旅游</a></dd>
                                <dd><a href="#">烹饪美食</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">科技</a></dt>
                                <dd><a href="#">工业技术</a></dd>
                                <dd><a href="#">科普读物</a></dd>
                                <dd><a href="#">建筑</a></dd>
                                <dd><a href="#">医学</a></dd>
                                <dd><a href="#">科学与自然</a></dd>
                                <dd><a href="#">计算机与互联网</a></dd>
                                <dd><a href="#">电子通信</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">教育</a></dt>
                                <dd><a href="#">中小学教辅</a></dd>
                                <dd><a href="#">教育与考试</a></dd>
                                <dd><a href="#">外语学习</a></dd>
                                <dd><a href="#">大中专教材</a></dd>
                                <dd><a href="#">科学与自然</a></dd>
                                <dd><a href="#">字典词典</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">艺术与收藏</a></dt>
                                <dd><a href="#">经济管理</a></dd>
                                <dd><a href="#">文化与艺术</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">其他</a></dt>
                                <dd><a href="#">工具书</a></dd>
                                <dd><a href="#">杂志期刊</a></dd>
                                <dd><a href="#">套装书</a></dd>
                                <dd><a href="#">打折图书</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">电脑/办公</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">手机通讯</a></dt>
                                <dd><a href="#">手机</a></dd>
                                <dd><a href="#">对讲机</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">运营商</a></dt>
                                <dd><a href="#">合约机</a></dd>
                                <dd><a href="#">选号中心</a></dd>
                                <dd><a href="#">装宽带</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">手机配件</a></dt>
                                <dd><a href="#">移动电源</a></dd>
                                <dd><a href="#">蓝牙耳机</a></dd>
                                <dd><a href="#">充电器</a></dd>
                                <dd><a href="#">数据线</a></dd>
                                <dd><a href="#">苹果周边</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">家具/家居/家装/厨具</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">大家电</a></dt>
                                <dd><a href="#">平板电视</a></dd>
                                <dd><a href="#">空调</a></dd>
                                <dd><a href="#">冰箱</a></dd>
                                <dd><a href="#">洗衣机</a></dd>
                                <dd><a href="#">迷你音响</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">厨卫家电</a></dt>
                                <dd><a href="#">燃气灶</a></dd>
                                <dd><a href="#">油烟机</a></dd>
                                <dd><a href="#">热水器</a></dd>
                                <dd><a href="#">消毒柜</a></dd>
                                <dd><a href="#">洗碗机</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">厨卫小电</a></dt>
                                <dd><a href="#">料理机</a></dd>
                                <dd><a href="#">榨汁机</a></dd>
                                <dd><a href="#">电饭煲</a></dd>
                                <dd><a href="#">压力锅</a></dd>
                                <dd><a href="#">豆浆机</a></dd>
                                <dd><a href="#">咖啡机</a></dd>
                                <dd><a href="#">微波炉</a></dd>
                                <dd><a href="#">电磁炉</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">生活电器</a></dt>
                                <dd><a href="#">取暖电器</a></dd>
                                <dd><a href="#">净化器</a></dd>
                                <dd><a href="#">加湿器</a></dd>
                                <dd><a href="#">扫地机器人</a></dd>
                                <dd><a href="#">吸尘器</a></dd>
                                <dd><a href="#">挂烫机</a></dd>
                                <dd><a href="#">电话机</a></dd>
                                <dd><a href="#">电风扇</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">个护健康</a></dt>
                                <dd><a href="#">剃须刀</a></dd>
                                <dd><a href="#">脱毛器</a></dd>
                                <dd><a href="#">口腔护理</a></dd>
                                <dd><a href="#">电吹风</a></dd>
                                <dd><a href="#">美容仪</a></dd>
                                <dd><a href="#">理发器</a></dd>
                                <dd><a href="#">按摩椅</a></dd>
                                <dd><a href="#">血压计</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">男装/女装/童装/内衣</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">摄影摄像</a></dt>
                                <dd><a href="#">数码现货即</a></dd>
                                <dd><a href="#">拍立得</a></dd>
                                <dd><a href="#">镜头</a></dd>
                                <dd><a href="#">户外器材</a></dd>
                                <dd><a href="#">数码相框</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">数码配件</a></dt>
                                <dd><a href="#">存储卡</a></dd>
                                <dd><a href="#">读卡器</a></dd>
                                <dd><a href="#">滤镜</a></dd>
                                <dd><a href="#">相机包</a></dd>
                                <dd><a href="#">数码支架</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">智能设备</a></dt>
                                <dd><a href="#">智能手环</a></dd>
                                <dd><a href="#">智能眼镜</a></dd>
                                <dd><a href="#">健康监测</a></dd>
                                <dd><a href="#">体感车</a></dd>
                                <dd><a href="#">无人机</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">美妆/个护清洁/宠物</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">宠物生活</a></dt>
                                <dd><a href="#">宠物粮食</a></dd>
                                <dd><a href="#">宠物零食</a></dd>
                                <dd><a href="#">医疗保健</a></dd>
                                <dd><a href="#">宠物玩具</a></dd>
                                <dd><a href="#">出行装备</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">生活日用</a></dt>
                                <dd><a href="#">保暖防护</a></dd>
                                <dd><a href="#">收纳用品</a></dd>
                                <dd><a href="#">雨伞雨具</a></dd>
                                <dd><a href="#">浴室用品</a></dd>
                                <dd><a href="#">洗漱用品</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">女鞋/箱包/钟表/珠宝</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">电脑整机</a></dt>
                                <dd><a href="#">笔记本电脑</a></dd>
                                <dd><a href="#">台式机</a></dd>
                                <dd><a href="#">超极本</a></dd>
                                <dd><a href="#">游戏本</a></dd>
                                <dd><a href="#">平板电脑</a></dd>
                                <dd><a href="#">平板配件</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">电脑配件</a></dt>
                                <dd><a href="#">CPU</a></dd>
                                <dd><a href="#">主板</a></dd>
                                <dd><a href="#">显卡</a></dd>
                                <dd><a href="#">硬盘</a></dd>
                                <dd><a href="#">SSD固态硬盘</a></dd>
                                <dd><a href="#">内存</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">男鞋/运动/户外</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">刀剪菜板</a></dt>
                                <dd><a href="#">菜刀</a></dd>
                                <dd><a href="#">剪刀</a></dd>
                                <dd><a href="#">多功能刀</a></dd>
                                <dd><a href="#">道具套装</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">水具酒具</a></dt>
                                <dd><a href="#">塑料杯</a></dd>
                                <dd><a href="#">运动水壶</a></dd>
                                <dd><a href="#">保温杯</a></dd>
                                <dd><a href="#">保温壶</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">房产/汽车/汽车用品</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">清洁用品</a></dt>
                                <dd><a href="#">纸巾湿巾</a></dd>
                                <dd><a href="#">清洁工具</a></dd>
                                <dd><a href="#">驱虫用品</a></dd>
                                <dd><a href="#">家庭清洁</a></dd>
                                <dd><a href="#">皮具护理</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">面部护肤</a></dt>
                                <dd><a href="#">洁面乳</a></dd>
                                <dd><a href="#">面膜</a></dd>
                                <dd><a href="#">防晒</a></dd>
                                <dd><a href="#">隔离</a></dd>
                                <dd><a href="#">爽肤水</a></dd>
                            </dl>
                        </div>
                    </li>
                    <li><a href="#">母婴/玩具乐器</a>
                        <div id="second-info">
                            <dl class="clearfix">
                                <dt><a href="#">男装</a></dt>
                                <dd><a href="#">衬衫</a></dd>
                                <dd><a href="#">针织衫</a></dd>
                                <dd><a href="#">夹克</a></dd>
                                <dd><a href="#">风衣</a></dd>
                                <dd><a href="#">牛仔裤</a></dd>
                            </dl>
                            <dl class="clearfix">
                                <dt><a href="#">女装</a></dt>
                                <dd><a href="#">雪纺衫</a></dd>
                                <dd><a href="#">休闲裤</a></dd>
                                <dd><a href="#">小西装</a></dd>
                                <dd><a href="#">皮衣</a></dd>
                                <dd><a href="#">羽绒服</a></dd>
                            </dl>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="nav-center">
                <img src="./img/banner主图.png" />
            </div>
            <div id="nav-right">
                <div id="gengduo">
                    <div id="kuaib">
                        <span style="font-size: 15px;">商品快报</span>
                        <div style="float: right;"><a href="#">更多 ></a></div>
                    </div>
                    <diV id="libiao">
                        <ul>
                            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
                            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
                            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>
                            <li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li>                       
                    </diV>
                </div>
                <div id="tobiao">
                    <div class="imaster">
                        <img class="iccc" src="./img/icon_机票_nor.png" >
                        <span>飞机</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_huoche.png" >
                        <span>火车</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_酒店_nor.png" >
                        <span>酒店</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_话费_nor.png" >
                        <span>话费</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_礼品卡_nor.png" >
                        <span>礼品卡</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_白条_nor.png" >
                        <span>白条</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_电影票_nor.png" >
                        <span>电影票</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_理财_nor.png" >
                        <span>理财</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_游戏_nor.png" >
                        <span>游戏</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_彩票_nor.png" >
                        <span>彩票</span>
                    </div>
                    <div class="imaster">
                         <img id="iccc" src="./img/icon_加油卡_nor.png">
                        <span>加油卡</span>
                    </div>
                    <div class="imaster">
                        <img id="iccc" src="./img/icon_众筹_nor.png" >
                        <span>众筹</span>
                    </div>
                    <!-- <img id="iccc" src="./img/icon_众筹_nor.png" >
                    <img id="iccc" src="./img/icon_加油卡_nor.png" >
                    <img id="iccc" src="./img/icon_彩票_nor.png" >
                    <img id="iccc" src="./img/icon_游戏_nor.png" >
                    <img id="iccc" src="./img/icon_理财_nor.png" >
                    <img id="iccc" src="./img/icon_电影票_nor.png" >
                    <img id="iccc" src="./img/icon_白条_nor.png" >
                    <img id="iccc" src="./img/icon_礼品卡_nor.png" >
                    <img id="iccc" src="./img/icon_话费_nor.png" >
                    <img id="iccc" src="./img/icon_酒店_nor.png" >
                    <img id="iccc" src="./img/icon_huoche.png" >
               -->
                </div>
            </div>
        </div>
    </div>
   <div class="miaos">
       <div class="container">
            <img src="./img/seckill.png" alt="">
            <img src="./img/baner4.png" alt="">
            <img src="./img/banner1.png" alt="">
            <img src="./img/banner2.png" alt="">
            <img src="./img/banner3.png" alt="">

       </div> 
   </div>
</body>
</html>